﻿body {

}

ul { width:200px;}
ul li { display:block;padding:10px;background:#f1f1f1;-webkit-transition:width 2s;}
ul li:nth-child(odd){ background:#01439c;color:#fff;}
ul li:hover {}



/* demo2 */
.circle { 
    background-color:#f1f1f1;
    border-radius: 100%;
    cursor: pointer;
    position: relative;
    margin: 0 auto;
    width: 15em;
    height: 15em;
    overflow: hidden;
    -webkit-transform: translateZ(0);
}
.circle:before, .circle:after{
    width: inherit;
    height: inherit;
    -webkit-transform: translateZ(0);
    box-shadow:inset 10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 10.6em 0 rgba(30, 140, 209, 0.2), inset -10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);
    -webkit-transition: box-shadow 0.75s;
    transition: box-shadow 0.75s;
}


